<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图片验证</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
    body{
    overflow: hidden;
    }
    #container{
    width: 100%;
    }
    .fontDiv{
    margin: 16px 0;
    }
    .dragFont{
    font-size: 16px;
    color: dodgerblue;
    }
    .imageDiv{
    width: 590px;
    height: 360px;
    margin: 20px auto 0 auto;
    position: relative;
    }
    .resultDiv{
    margin: 10px 20px;
    }
    #validateImage{
    border-radius: 4px;
    }
    #slideImage{
    position: absolute;
    top: 5px;
    left: 0;
    }
    #sliderOuter{
    width: 590px;
    height: 40px;
    margin: 12px auto;
    border-radius: 20px;
    box-shadow: 0 0 10px 5px darkgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    }
    #dragDiv{
    width: 100%;
    height: 40px;
    position: absolute;
    font-size: 16px;
    color: dodgerblue;
    text-align: center;
    line-height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    #sliderInner{
    width: 94px;
    height: 40px;
    border-radius: 20px;
    font-size: 2rem;
    background-color: #28a745;
    cursor: pointer;
    position: absolute;
    left: 0;
    }
    #sliderInner i{
    position: relative;
    top: -2px;
    left: 36px;
    color: white;
    }
    .coverIcon{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    }
    </style>
</head>
<body>
<div id="container">
    <div class="imageDiv">
        <img id="validateImage" src=""/>
        <img id="slideImage" src="" style="">
    </div>
    <div class="resultDiv">
        <button class="btn btn-success" onclick="exchange();"><i class="fas fa-redo"></i>&nbsp;换一组</button>
        <span id="operateResult"></span>
    </div>
    <div>
        <div id="sliderOuter">
            <div id="dragDiv">拖动滑块完成拼图</div>
            <div id="sliderInner">
                <i class="fas fa-angle-double-right"></i>
                <div class="coverIcon"></div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" value="" id="imageId">
</body>
<script th:inline="javascript">
    var left = 0;

    $(function(){
        // 初始化图片验证码
        initImageValidate();

        /* 初始化按钮拖动事件 */
        // 鼠标点击事件
        $("#sliderInner").mousedown(function(){
            // 鼠标移动事件
            document.onmousemove = function(ev) {
                left = ev.clientX;
                if(left >= 67 && left <= 563){
                    $("#sliderInner").css("left",(left-67)+"px");
                    $("#slideImage").css("left",(left-67)+"px");
                }
            };
            // 鼠标松开事件
            document.onmouseup=function(){
                document.onmousemove=null;
                checkImageValidate();
            };
        });

    });

    function initImageValidate(){
        $.ajax({
            async : false,
            type : "POST",
            url : "createImgValidate",
            dataType: "json",
            /*data:{
                telephone:telephone
            },*/
            success : function(data) {
                if(data.code == '0'){
                    // 设置图片的src属性
                    $("#validateImage").attr("src", "data:image/png;base64,"+data.data.oriCopyImage);
                    $("#slideImage").attr("src", "data:image/png;base64,"+data.data.newImage).attr("style","margin-top: "+data.data.heightRandom+"px");
                    //后续存放一个UUID，进行X轴的偏移量校验
                    $("#imageId").val(data.data.imageId);
                }else{
                    /*layer.open({
                        icon:2,
                        title: "温馨提示",
                        content: data.info
                    });*/
                    alert(data.data.msg);
                }
            },
            error : function() {}
        });
    }

    function exchange(){
        initImageValidate();
    }

    // 校验
    function checkImageValidate(){
        console.log("left="+left)
        var uuid = document.getElementById("imageId").value;
        console.log("uuid="+uuid);
        var datar={ "imageId": uuid,"checkImgValidate":left}
        $.ajax({
            async : false,
            type : "POST",
            url : "/checkImgValidate?imageId="+uuid+"&checkImgValidate="+left,
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            /*data: JSON.stringify(datar),*/
            success : function(data) {
                if(data.code == '0'){
                    /*$("#operateResult").html(data.info).css("color","#28a745");*/
                    // 校验通过，后续功能
                    alert("通过啦。。。")
                    $("#sliderInner").animate({"left":"0px"},200);
                    $("#slideImage").animate({"left":"0px"},200);
                    initImageValidate();
                }else{
                   /* $("#operateResult").html(data.info).css("color","#dc3545");*/
                    // 验证未通过，将按钮和拼图恢复至原位置
                    $("#sliderInner").animate({"left":"0px"},200);
                    $("#slideImage").animate({"left":"0px"},200);
                    alert("请重新滑动")
                    initImageValidate();
                }
            },
            error : function() {}
        });
    }
</script>
<!--<script type="text/javascript" th:src="@{/static/js/jquery-3.4.0.min.js}" ></script>
<script type="text/javascript" th:src="@{/static/js/component/imageValidate.js}" ></script>-->
</html>